<template>
    <div ref="outer">
        <div  v-for="category in list" :key="category.id">
            <!-- 一级菜单 -->
            <div class="category-header" @click="toggleCategory(category.id)">
                <span>{{ category.name }}</span>
                <img src="@/assets/img/zhuan.png" class="arrow"
                    :class="{ 'arrow-down': isCategoryOpen(category.id) }" />

            </div>

            <!-- 二级菜单 -->
            <transition name="slide">
                <div v-if="isCategoryOpen(category.id)">
                    <div v-for="menu in menuList[category.id]" :key="menu.name" class="menu-item">
                        <div :ref="menu.name" class="menu-header"
                            @click.stop="toggleMenu(menu, category.id, menu.path, menu.id, category.name)">
                            <span>{{ menu.name }}</span>
                            <img v-if="menu.list" src="@/assets/img/zhuan.png" class="arrow"
                                :class="{ 'arrow-down': isMenuOpen(menu) }" />
                        </div>

                        <!-- 三级菜单内容 -->
                        <transition name="slide">
                            <div class="store" v-if="isMenuOpen(menu) && menu.list">
                                <div v-for="item in menu.list" :key="item.id">
                                    <span>{{ item.line_name }}</span>
                                    <div class="info" v-for="a in item.products" :key="a.id"
                                        @click="goShow('/show', a.id, 3)">
                                        <img class="goods" :src="a.img" alt="">
                                        <span>{{ a.name }}</span>
                                    </div>
                                </div>
                            </div>
                        </transition>
                    </div>
                </div>
            </transition>
        </div>

    </div>
</template>

<script>

export default {
    data() {
        return {
            // list: [
            //     {
            //         name: '电动三轮车',
            //         id: 'ddsl'
            //     },
            //     {
            //         name: '电动生活',
            //         id: 'ddsh'
            //     },
            //     {
            //         name: '富贵科技',
            //         id: 'fgkj'
            //     },
            //     {
            //         name: '服务支持',
            //         id: 'fwzc'
            //     },
            //     {
            //         name: '关于我们',
            //         id: 'gywm'
            //     }
            // ],
            activeCategory: null,
            activeMenu: null,
            fwzc: [
                {
                    name: '售后服务',
                    path: 'afterSale',
                },
                {
                    name: '使用指南',
                    path: '/guide',
                }
            ],
            gywm: [
                {
                    name: '走进富贵泉',
                    path: '/aboutUs',
                },
                {
                    name: '新闻动态',
                    path: '/news',
                },
                {
                    name: '联系我们',
                    path: '/contactUs',
                },
                {
                    name: '加入我们',
                },
                {
                    name: '荣誉资质',
                }
            ],
            offsetX: ''
        }
    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        show() {
            this.activeMenu = null
            this.activeCategory = null
        }
    },
    computed: {
        menuList() {
            let menuList = this.$store.state.menuList
            // menuList.fwzc = this.fwzc
            // menuList.gywm = this.gywm
            return menuList
        },
        list() {
            return this.$store.state.menuList.list
        }
    },
    methods: {
        toggleCategory(categoryId) {
            // 关闭当前分类时也关闭其下的菜单
            if (this.activeCategory !== categoryId) {
                this.activeMenu = null
            }
            this.activeCategory = this.activeCategory === categoryId ? null : categoryId

        },
        goPage(url, name, id) {
            window.scrollTo({
                top: 0,
                behavior: 'smooth' // 平滑滚动
            });
            if (name == 'ddsl' || name == 'ddsh') return
            // 富贵科技
            if (name == 'fgkj') {
                this.$router.push({
                    path: '/show',
                    query: {
                        id, op: 2
                    }
                })
                this.$emit('close')
                return
            }

            // // 服务支持
            if (name == 'fwzc') {
                if (url == '/afterSale' || url == '/guide') {
                    this.$router.push(url)
                    this.$emit('close')
                } else {
                    this.$router.push({
                        path: '/show',
                        query: {
                            id, op: 6
                        }
                    })
                    this.$emit('close')
                    return
                }
            }

            if (name == 'gywm') {
                if (url == '/show?id=0&op=4' || url == '/news' || url == '/contactUs' || url == '/jobIndex') {
                    this.$router.push(url)
                    this.$emit('close')
                } else {
                    this.$router.push({
                        path: '/show',
                        query: {
                            id, op: 7
                        }
                    })
                    this.$emit('close')
                    return
                }
            }

        },
        // goPage(url, name, id) {
        //     if (name == 'fgkj') {
        //         this.$router.push({
        //             path: '/show',
        //             query: {
        //                 id, op: 2
        //             }
        //         })
        //         this.$emit('close')
        //         return
        //     }
        //     if (name == 'gywm' && url == '/aboutUs') {
        //         this.$router.push({
        //             path: '/show',
        //             query: {
        //                 id: 0, op: 4
        //             }
        //         })
        //         this.$emit('close')
        //         return;
        //     }
        //     if (url) {
        //         this.$router.push(url)
        //         this.$emit('close')
        //     }

        // },
        goShow(url, id, op) {
            console.log(url, id, op);

            if (url) {
                this.$router.push({
                    path: url,
                    query: {
                        id, op
                    }
                })
                this.$emit('close')
            }
        },
        toggleMenu(menu, name, url, id) {
            if (this.activeMenu === menu) {
                this.activeMenu = null
            } else {
                this.activeMenu = menu
            }
            this.$refs.outer.scrollIntoView({ top: 0 })
            this.goPage(url, name, id)
        },
        isCategoryOpen(categoryId) {
            return this.activeCategory === categoryId
        },
        isMenuOpen(menu) {
            return this.activeMenu === menu
        }
    }
}
</script>

<style lang="scss" scoped>
.category-header {
    padding: 90px;
    display: block;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    font-weight: 400;
    font-size: 53px;
    color: #000000;
    border-bottom: 2px solid #606060;
}

.menu-item {
    margin-bottom: 2px;
}

.menu-header {
    padding: 40px 90px 40px 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: MiSans;
    font-weight: 300;
    font-size: 53px;
    color: #000000;
}

.arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(-180deg);
    width: 82px;
    height: 41px;
}

.arrow-down {
    transform: rotate(0deg);
}

.store>div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    overflow: hidden;
    padding: 40px 90px 40px 110px;
    box-sizing: border-box;

    scroll-margin-top: 180px;

    >span {
        display: block;
        width: 100%;
        font-weight: bold;
        font-size: 53px;
        color: #000000;
    }
}

.info {
    // background-color: #EDEDED;
    width: 760px;
    height: 760px;
    display: flex;
    justify-content: center;
    padding: 110px 0 206px;
    box-sizing: border-box;
    position: relative;

    .goods {
        object-fit: contain;
        max-height: 640px;
        max-width: 100%;
        height: auto;
    }

    span {
        bottom: 101px;
        position: absolute;
        font-family: AlibabaPuHuiTi;
        font-weight: 400;
        font-size: 46px;
        color: #010202;
    }
}

/* 动画效果 */
.slide-enter-active,
.slide-leave-active {
    transition: all 0.3s ease;
    max-height: 5000px;
    /* 设置一个足够大的值 */
    opacity: 1;
}

.slide-enter,
.slide-leave-to {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
</style>